<template>
  <div class="map-wrapper">


    <StarBackground></StarBackground>
    <div class="center_center1">
      <img src="../assets/title_b2.png" alt="" />
      <div @click="enterFullscreen" class="title-clickable">华顿云边缘计算可视化平台</div>
      <img src="../assets/title_b1.png" alt="" />
    </div>
    
    <!-- 全屏提示 -->
    <div v-if="showFullscreenTip" class="fullscreen-tip" @click="enterFullscreen">
      <div class="tip-content">
        <div class="tip-icon">🔍</div>
        <div class="tip-text">点击进入全屏模式</div>
        <div class="tip-hint">数据加载完成，点击任意位置进入全屏</div>
      </div>
    </div>
    <div class="center">
      <div class="hud-dashboard" ref="dashboardContainer">
        <!-- 设备状态监控 -->
        <div class="hud-panel glow-border">
          <div class="panel-header">
            <h2 class="panel-title">设备状态监控</h2>
            <div class="refresh-indicator">
              <span>实时更新</span>
              <div class="pulse-dot"></div>
            </div>
          </div>
          <div ref="deviceStatusChart" class="chart" style="height: 15vh"></div>
          <div class="panel-footer">
            <div class="stat-item">
              <div class="stat-label">总设备</div>

              <div class="stat-value">
                {{ numberToChineseUnit(deviceData.total) }}
              </div>
            </div>
            <div class="stat-item online">
              <div class="stat-label">在线设备</div>
              <div class="stat-value">
                {{ numberToChineseUnit(deviceData.online) }}
              </div>
            </div>
            <div class="stat-item offline">
              <div class="stat-label">离线设备</div>
              <div class="stat-value">
                {{ numberToChineseUnit(deviceData.offline) }}
              </div>
            </div>
          </div>
        </div>

        <!-- 运营商分布统计 -->
        <div class="hud-panel" style="flex-grow: 1">
          <div class="panel-header">
            <h2 class="panel-title">运营商流量分布</h2>
          </div>
          <div ref="operatorChart" class="chart" style="height: 18vh"></div>
        </div>

        <!-- 区域设备部署 -->
        <div class="hud-panel glow-border" style="flex-grow: 1">
          <div class="panel-header">
            <h2 class="panel-title">在线任务类别分布</h2>
          </div>
          <div ref="newDeviceChart" class="chart" style="height: 18vh"></div>
        </div>
      </div>
      <div class="center_center">
        <div class="center_center2">
          <div class="center_center2_title">
            <div>区域设备分布图</div>
            <div @click="GoHome" style="cursor: pointer">回到首页</div>
          </div>
          <MapDrilling
            class="mapdriliing"
            ref="childChart"
            :dataMap="dataMap"
          ></MapDrilling>
        </div>
        <div class="center_center3" ref="center_center3">
          <div class="hud-container">
            <!-- <div class="tech-circle"></div> -->
            <div class="tech-circle"></div>

            <div class="dashboard">
              <div class="hud-grid"></div>
              <div class="dash-glow"></div>
              <!-- <div class="scan-line"></div> -->

              <div class="stats-grid">
                <!-- 今日新增 -->
                <div
                  class="stat-card"
                  v-for="(item, index) in income"
                  :key="index"
                >
                  <!-- <div class="card-top">
                    <div class="icon-container">
                      <img
                        :src="'/src/assets/t' + (index + 1) + '.png'"
                        alt=""
                        style="width: 100%; height: 100%"
                      />
                    </div>
                    <div class="title">{{ item.title }}</div>
                  </div>
                  <div
                    class="value animated"
                    id="today-add"
                    style="
                      display: flex;
                      justify-content: space-between;
                      align-items: flex-end;
                    "
                  >
                    <NumberRolling :targetNumber="item.num"></NumberRolling>
                    <div
                      style="
                        margin-left: 5px;
                        font-size: clamp(2rem, 4vw, 2.5rem);
                      "
                    >
                      ({{ item.unit }})
                    </div> -->
                  <div class="xinstatr_box">
                    <img
                      :src="ImgSwitch(index)"
                      alt=""
                      style="width: 130px; height: 130px"
                    />
                    <div
                      class="warp"
                      style="
                        margin-left: 15px;
                        font-size: clamp(1rem, 2vw, 1.5rem);
                      "
                    >
                      <div>{{ item.title }}</div>
                      <div
                        style="
                          margin-top: 15px;
                          display: flex;
                          align-items: center;
                        "
                      >
                        {{ item.num }}

                        <div style="margin-left: 5px">{{ item.unit }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="card-glow"></div>
                  <div class="border-effect top"></div>
                  <div class="border-effect bottom"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="agent-ranking">
        <!-- 标题区域 -->
        <div class="timeBox">
          <realtimeClock></realtimeClock>
        </div>
        <div class="panel-header">
          <h2 class="title">
            <i class="fas fa-crown"></i>
            代理商排行榜
          </h2>
          <div class="update-info">
            <span>实时更新</span>
            <span class="pulse-dot"></span>
          </div>
        </div>

        <!-- 表头 -->
        <div class="table-header agent-row-flex">
          <div class="header-column rank-cell">排名</div>
          <div class="header-column name-cell">姓名</div>
          <div class="header-column income-cell">收益</div>
          <div class="header-column box-cell">盒子</div>
        </div>

        <!-- 代理商列表 -->
        <div class="loop-wrapper" ref="loopWrapper">
          <div
            class="ranking-list"
            :class="{ 'loop-animation': shouldAnimate }"
          >
            <div
              v-for="(agent, index) in duplicatedAgents"
              :key="index"
              class="agent-item agent-row-flex"
              :class="{
                'top-1': index === 0,
                'top-2': index === 1,
                'top-3': index === 2,
              }"
            >
              <div style="width: 25%">
                <div class="rank-cell">{{ index + 1 }}</div>
              </div>
              <div class="name-cell" style="width: 25%">{{ agent.name }}</div>
              <div class="income-cell" style="width: 25%">
                ¥{{ agent.income }}
              </div>
              <div class="box-cell" style="width: 25%">
                {{ agent.boxes }}
                <span class="box-icon">
                  <i class="fas fa-box"></i>
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- HUD效果元素 -->
        <div class="hud-grid"></div>
        <div class="glow-border"></div>
        <!-- <div class="scan-line"></div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import t1 from "@/assets/t1.png";
import t2 from "@/assets/t2.png";
import t3 from "@/assets/t3.png";
import t4 from "@/assets/t4.png";
import t5 from "@/assets/t5.png";
import t6 from "@/assets/t6.png";
import MapDrilling from "@/components/MapDrilling";
import StarBackground from "@/components/StarBackground";
import NumberRolling from "@/components/NumberRolling";
import realtimeClock from "@/components/realtimeClock";
import { getGeoJson, getMapData } from "@/api/map";
import { listRanking } from "../api/dashboard/ranking.js";
import { listDistribution } from "../api/dashboard/distribution.js";
import { getDeviceStats } from "../api/pcdn/info.js";
import { listRegional } from "../api/dashboard/regional.js";
import { listIspDevices } from "../api/pcdn/isp.js";
import { listProvinceDevices } from "../api/pcdn/province.js";

import {
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  watchEffect,
  nextTick,
  onUnmounted,
} from "vue";
import * as echarts from "echarts";

const ImgSwitch = (index) => {
  switch (index) {
    case 0:
      return t1;
    case 1:
      return t2;
    case 2:
      return t3;
    case 3:
      return t4;
    case 4:
      return t5;
    case 5:
      return t6;
  }
};
// 响应式数据
const deviceStatusChart = ref(null);
const operatorChart = ref(null);
const newDeviceChart = ref(null);
const dashboardContainer = ref(null);
// 代理商排行榜
const agents = ref([]);
// 代理商排行榜
const duplicatedAgents = ref([]);
// 运营商
const operatorData = ref([]);
// 设备状态监控
const deviceData = ref({
  total: 0,
  online: 0,
  offline: 0,
});
// 任务名称
const areas = ref([]);
// 设备收益
const income = ref([]);
const dataMap = ref([]);
const childChart = ref(null);
const timer = ref(null);
const showFullscreenTip = ref(false);


// 省份名称到adcode的映射
const provinceNameToAdcode = {
  北京: "110000",
  北京市: "110000",
  天津: "120000",
  天津市: "120000",
  河北: "130000",
  河北省: "130000",
  山西: "140000",
  山西省: "140000",
  内蒙古: "150000",
  内蒙古自治区: "150000",
  辽宁: "210000",
  辽宁省: "210000",
  吉林: "220000",
  吉林省: "220000",
  黑龙江: "230000",
  黑龙江省: "230000",
  上海: "310000",
  上海市: "310000",
  江苏: "320000",
  江苏省: "320000",
  浙江: "330000",
  浙江省: "330000",
  安徽: "340000",
  安徽省: "340000",
  福建: "350000",
  福建省: "350000",
  江西: "360000",
  江西省: "360000",
  山东: "370000",
  山东省: "370000",
  河南: "410000",
  河南省: "410000",
  湖北: "420000",
  湖北省: "420000",
  湖南: "430000",
  湖南省: "430000",
  广东: "440000",
  广东省: "440000",
  广西: "450000",
  广西壮族自治区: "450000",
  海南: "460000",
  海南省: "460000",
  重庆: "500000",
  重庆市: "500000",
  四川: "510000",
  四川省: "510000",
  贵州: "520000",
  贵州省: "520000",
  云南: "530000",
  云南省: "530000",
  西藏: "540000",
  西藏自治区: "540000",
  陕西: "610000",
  陕西省: "610000",
  甘肃: "620000",
  甘肃省: "620000",
  青海: "630000",
  青海省: "630000",
  宁夏: "640000",
  宁夏回族自治区: "640000",
  新疆: "650000",
  新疆维吾尔自治区: "650000",
  台湾: "710000",
  台湾省: "710000",
  香港: "810000",
  香港特别行政区: "810000",
  澳门: "820000",
  澳门特别行政区: "820000",
};

// 转换省份设备数据为地图所需格式
const convertProvinceDataToMapFormat = (provinceData) => {
  return provinceData.map((item) => ({
    adcode: String(provinceNameToAdcode[item.provinceName] || "000000"),
    name: item.provinceName,
    value: item.nodeCount,
  }));
};

const apiAll = async () => {
  console.log('开始更新数据...', new Date().toLocaleString());
  
  try {
    // 获取代理商排行榜
    let info = await listRanking();
    agents.value = info.data;
    duplicatedAgents.value = [...agents.value];

    // 获取运营商设备列表
    info = await listIspDevices();
    operatorData.value = info.data || [];

    // 获取任务列表
    info = await listDistribution();
    areas.value = [];
    info.rows.forEach((item) => {
      if (item.type == "task") {
        areas.value.push(item);
      }
    });

    // 查询设备统计数据（新接口）
    info = await getDeviceStats();
    // 设备收益卡片数据
    income.value = [
      { title: "昨日收益", num: info.data.yesterdayIncome, unit: "元" },
      { title: "本月收益", num: info.data.monthIncome, unit: "元" },
      { title: "累计收益", num: info.data.totalIncome, unit: "元" },
      { title: "今日新增", num: info.data.todayAddNode, unit: "台" },
      { title: "本月新增", num: info.data.monthAddNode, unit: "台" },
      
      { title: "节点总数", num: info.data.totalNode, unit: "台" },
    ];
    console.log('数据更新完成:', income.value);
    
    // 设备状态监控数据
    deviceData.value.total = info.data.totalDevice;
    deviceData.value.online = info.data.onlineDevice;
    deviceData.value.offline = info.data.offlineDevice;

    // 获取省份设备列表
    info = await listProvinceDevices();
    dataMap.value = convertProvinceDataToMapFormat(info.data || []);

    nextTick(() => {
      initAnimation();
      initCharts();
      // 移除重复的地图初始化，因为 MapDrilling 组件已经在 mounted 中初始化了
      // childChart.value.initChart();
      
      // 数据加载完成后显示全屏提示
      showFullscreenTip.value = true;
    });
    
    console.log('数据更新和图表刷新完成');
  } catch (error) {
    console.error('数据更新失败:', error);
  }
};
apiAll();
// 设置30分钟定时器，每半小时更新一次数据
timer.value = setInterval(() => {
  console.log('定时器触发，开始更新数据...', new Date().toLocaleString());
  apiAll();
}, 1800000); // 30分钟 = 1800000毫秒

/**
 * 将数字转换为中文简体单位（不带小数）
 * @param {number} num - 输入数字
 * @returns {string} 中文单位字符串
 */
function numberToChineseUnit(num) {
  if (isNaN(num)) return "";
  const units = ["", "万", "亿", "兆"];
  const unitSteps = [1, 10000, 100000000, 1000000000000];

  for (let i = units.length - 1; i >= 0; i--) {
    if (Math.abs(num) >= unitSteps[i]) {
      const quotient = Math.floor(num / unitSteps[i]);
      return `${quotient}${units[i]}`;
    }
  }
  return num.toString(); // 小于1万时直接返回数字
}

const deviceTypes = ref([""]);
const searchArea = ref("");
const selectedDeviceType = ref("");

// 图表实例
let deviceStatusChartInstance = null;
let operatorChartInstance = null;
let newDeviceChartInstance = null;

// HUD风格主题配置
const hudTheme = {
  backgroundColor: "transparent",
  textStyle: {
    color: "#00f7ff",
    fontFamily: "Arial, sans-serif",
    fontSize: 14,
  },
  color: ["#00f7ff", "#00ff9d", "#ff3c5c", "#f0b90b"],
};

// 初始化设备状态图表
const initDeviceStatusChart = () => {
  if (!deviceStatusChart.value) return;

  // 销毁旧的实例
  if (deviceStatusChartInstance) {
    deviceStatusChartInstance.dispose();
  }
  deviceStatusChartInstance = echarts.init(deviceStatusChart.value);

  deviceStatusChartInstance.setOption({
    ...hudTheme,
    grid: {
      top: "15%",
      bottom: "15%",
      left: "10%",
      right: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    series: [
      {
        name: "设备状态",
        type: "pie",
        radius: ["65%", "90%"],
        center: ["50%", "50%"],
        startAngle: 225,
        clockwise: false,
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: "#0c1c2e",
          borderWidth: 4,
        },
        label: {
          show: false,
        },
        emphasis: {
          scale: false,
          itemStyle: {
            shadowBlur: 20,
            shadowColor: "rgba(0, 247, 255, 0.8)",
          },
        },
        data: [
          {
            value: deviceData.value.online,
            name: "在线设备",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#00f7ff" },
                { offset: 1, color: "#0051ff" },
              ]),
            },
          },
          {
            value: deviceData.value.offline,
            name: "离线设备",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#ff3c5c" },
                { offset: 1, color: "#ff8e8e" },
              ]),
            },
          },
        ],
      },
    ],
    graphic: [
      {
        type: "text",
        left: "center",
        top: "45%",
        z: 11,
        style: {
          text: "设备总数",
          fill: "#00f7ff",
          fontSize: 16,
          fontWeight: "bold",
        },
      },
      {
        type: "text",
        left: "center",
        top: "55%",
        z: 11,
        style: {
          text: numberToChineseUnit(deviceData.value.total),
          fill: "#00f7ff",
          fontSize: 24,
          fontWeight: "bold",
        },
      },
    ],
  });
};

// 初始化运营商图表
const initOperatorChart = () => {
  if (!operatorChart.value) return;

  // 销毁旧的实例
  if (operatorChartInstance) {
    operatorChartInstance.dispose();
  }
  operatorChartInstance = echarts.init(operatorChart.value);

  operatorChartInstance.setOption({
    ...hudTheme,
    grid: {
      top: "20%",
      bottom: "15%",
      left: "12%",
      right: "10%",
    },
    xAxis: {
      type: "category",
      data: operatorData.value.map((item) => item.ispName),
      axisLabel: {
        interval: 0,
        fontSize: 14,
        color: "#00f7ff",
      },
      axisLine: {
        lineStyle: {
          color: "#00f7ff66",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "设备数",
      nameTextStyle: {
        color: "#00f7ff",
      },
      splitLine: {
        lineStyle: {
          color: "#00f7ff33",
        },
      },
      axisLabel: {
        color: "#00f7ff",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(12, 28, 46, 0.9)",
      borderColor: "#00f7ff",
      textStyle: {
        color: "#00f7ff",
      },
      axisPointer: {
        type: "shadow",
      },
    },
    series: [
      {
        type: "bar",
        barWidth: "40%",
        data: operatorData.value.map((item) => {
          return {
            value: item.deviceCount,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#00f7ff" },
                { offset: 1, color: "#003c8f" },
              ]),
            },
          };
        }),
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "#00f7ff",
          },
        },
        animationDelay: function (idx) {
          return idx * 200;
        },
      },
    ],
  });

  // 添加柱状图动画
  operatorChartInstance.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: 0,
  });
};

// 初始化新设备图表
const initNewDeviceChart = () => {
  if (!newDeviceChart.value) return;

  // 销毁旧的实例
  if (newDeviceChartInstance) {
    newDeviceChartInstance.dispose();
  }
  newDeviceChartInstance = echarts.init(newDeviceChart.value);

  // 模拟区域数据
  const deviceColors = {
    任务A: "#00f7ff",
  };

  const series = [];
  deviceTypes.value.forEach((type) => {
    if (selectedDeviceType.value && type !== selectedDeviceType.value) return;
    series.push({
      name: type,
      type: "bar",
      stack: "total",
      data: areas.value.map((item) => item.value || 0),
      itemStyle: {
        color: deviceColors[type],
        borderRadius: [4, 4, 0, 0],
      },
    });
  });

  newDeviceChartInstance.setOption({
    ...hudTheme,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "rgba(12, 28, 46, 0.9)",
      borderColor: "#00f7ff",
      textStyle: {
        color: "#00f7ff",
      },
      formatter: function (params) {
        let html = `<div style="font-weight:bold;margin-bottom:5px;">${params[0].name}</div>`;
        params.forEach((p) => {
          html += `
            <div style="display:flex;align-items:center;margin:5px 0;">
              <div style="width:10px;height:10px;background:${p.color};border-radius:2px;margin-right:5px;"></div>
              <div>${p.seriesName}:</div>
              <div style="font-weight:bold;margin-left:5px;">${p.value}台</div>
            </div>
          `;
        });
        return html;
      },
    },
    legend: {
      right: 0,
      top: 10,
      icon: "roundRect",
      textStyle: {
        color: "#00f7ff",
      },
    },
    grid: {
      top: "15%",
      bottom: "10%",
      left: "10%",
      right: "10%",
    },
    xAxis: {
      type: "category",
      data: areas.value.map((item) => item.name),
      axisLine: {
        lineStyle: {
          color: "#00f7ff66",
        },
      },
      axisLabel: {
        color: "#00f7ff",
        interval: 0,
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "",
      nameTextStyle: {
        color: "#00f7ff",
      },
      splitLine: {
        lineStyle: {
          color: "#00f7ff33",
        },
      },
      axisLabel: {
        color: "#00f7ff",
      },
    },
    series: series,
  });
};

// 初始化所有图表
const initCharts = () => {
  initDeviceStatusChart();
  initOperatorChart();
  initNewDeviceChart();
};

// 窗口调整处理
const handleResize = () => {
  const charts = [
    deviceStatusChartInstance,
    operatorChartInstance,
    newDeviceChartInstance,
  ];

  charts.forEach((chart) => {
    if (chart) chart.resize();
  });
};

// 监听筛选变化
watch([searchArea, selectedDeviceType], () => {
  initNewDeviceChart();
});

// 创建双份代理商列表用于无缝循环

const loopWrapper = ref(null); // 获取循环容器引用
// 动画控制标志
const shouldAnimate = ref(false);

// 动态计算每个内容高度
const itemHeight = ref(50); // 默认值，会在mounted中更新
const contentHeight = ref(0);

// 初始化动画
const initAnimation = () => {
  nextTick(() => {
    if (agents.value.length > 0) {
      // 获取第一个代理项目的高度
      const element = document.querySelector(".agent-item");
      if (element) {
        itemHeight.value = element.clientHeight;

        // 计算原始内容的高度（不包括副本）
        contentHeight.value = agents.value.length * itemHeight.value;

        // 设置CSS变量供动画使用
        if (loopWrapper.value) {
          loopWrapper.value.style.setProperty(
            "--visible-height",
            `${loopWrapper.value.clientHeight}px`
          );
        }
      }
      shouldAnimate.value = true;
    }
  });
};

// 添加新内容时更新高度
const addNewContent = (content) => {
  agents.value.push(content);
  duplicatedAgents.value = [...agents.value, ...agents.value];
  contentHeight.value = agents.value.length * itemHeight.value;
};

// 获取最后更新时间
const lastUpdateTime = computed(() => {
  const now = new Date();
  return `更新: ${now.getHours().toString().padStart(2, "0")}:${now
    .getMinutes()
    .toString()
    .padStart(2, "0")}:${now.getSeconds().toString().padStart(2, "0")}`;
});

// 格式化数字
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + "万";
  }
  return num;
};
import { useRouter } from "vue-router";
const router = useRouter();
const GoHome = () => {
  router.push("/index");
};

// 进入全屏
const enterFullscreen = async () => {
  try {
    const element = document.documentElement; // 整个页面
    if (element.requestFullscreen) {
      await element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      // Safari/旧版Chrome
      await element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      // IE/Edge
      await element.msRequestFullscreen();
    }
    // 成功进入全屏后隐藏提示
    showFullscreenTip.value = false;
  } catch (error) {
    console.log("全屏请求失败:", error);
  }
};

// 切换全屏
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    enterFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
};

// 页面挂载
onMounted(() => {
  window.addEventListener("resize", handleResize);

  // 添加键盘事件监听
  const handleKeyPress = (event) => {
    // F11 键进入全屏
    if (event.key === "F11") {
      event.preventDefault();
      enterFullscreen();
    }
  };

  window.addEventListener("keydown", handleKeyPress);



  // 清理事件监听
  onBeforeUnmount(() => {
    window.removeEventListener("keydown", handleKeyPress);
    window.removeEventListener("resize", handleResize);
  });
});

// 页面卸载
onBeforeUnmount(() => {
  const charts = [
    deviceStatusChartInstance,
    operatorChartInstance,
    newDeviceChartInstance,
  ];
  if (timer.value) {
    console.log('清理定时器...');
    clearInterval(timer.value);
    timer.value = null; // 清除引用
  }

  charts.forEach((chart) => {
    if (chart) chart.dispose();
  });
});
</script>

<style lang="scss">
.border_d {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 0;
}
#canvas {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 0;
}
.mapdriliing {
  width: 100%;
  height: 100%;
}

.center_center1 {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 2vw;
  padding: 50px 50px;
  box-sizing: border-box;
  img {
    width: 30%;
    height: 40px;
  }
  div {
    margin: 0 100px;
    background: linear-gradient(
      90deg,
      rgb(0, 163, 255),
      rgb(141, 211, 252) 50%,
      rgb(0, 163, 255)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); /* 添加发光效果 */
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: scale(1.05);
      text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    }
    
    &.title-clickable {
      cursor: pointer;
    }
  }
}
.center {
  position: relative;
  z-index: 1;
  color: #fff;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100vw;
  height: calc(90vh - 20px);
  padding: 10px;
  box-sizing: border-box;

  .center_center {
    width: 60%;
    height: 100%;
    margin: 0 10px;
    display: flex;
    flex-wrap: wrap;
    // border: 1px solid #00a3ff;
    position: relative;
    align-content: space-between;
    .center_center2 {
      width: 100%;
      height: 60%;
      padding: 20px;
      box-sizing: border-box;
      position: relative;
      border: 1px solid rgba(0, 190, 255, 0.25);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 0 40px rgba(0, 150, 255, 0.3);
      .center_center2_title {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;

        font-size: 2vh;
        font-weight: bold;
        color: #00f7ff;
        text-shadow: 0 0 10px rgba(0, 247, 255, 0.6);
        z-index: 9999999;
      }
    }
    .center_center3 {
      width: 100%;
      height: calc(42% - 40px);
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .income_item {
        width: 30%;
        height: 45%;
        border: 1px solid #00a3ff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        .title {
          width: 100%;
          font-size: 20px;
        }
        .num {
          width: 100%;
          font-size: 30px;
        }
      }
    }
  }

  .agent-ranking {
    width: 25vw;
    height: 100%;
    position: relative;
    background: rgba(12, 28, 46, 0.85);
    border: 1px solid rgba(0, 247, 255, 0.25);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 167, 255, 0.15);
    display: flex;
    flex-direction: column;
    padding: 2.5vh;
    z-index: 10;
    .timeBox {
    }
    // HUD网格背景效果
    .hud-grid {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: radial-gradient(
          circle at 20% 30%,
          rgba(0, 247, 255, 0.05) 0%,
          transparent 15%
        ),
        radial-gradient(
          circle at 80% 70%,
          rgba(0, 247, 255, 0.05) 0%,
          transparent 15%
        ),
        repeating-linear-gradient(
          to right,
          rgba(0, 247, 255, 0.03) 0,
          rgba(0, 247, 255, 0.03) 1px,
          transparent 1px,
          transparent 20px
        ),
        repeating-linear-gradient(
          to bottom,
          rgba(0, 247, 255, 0.03) 0,
          rgba(0, 247, 255, 0.03) 1px,
          transparent 1px,
          transparent 20px
        );
      z-index: -1;
      pointer-events: none;
    }

    // 霓虹光效边框
    .glow-border {
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: 12px;
      background: linear-gradient(
        135deg,
        rgba(0, 247, 255, 0),
        rgba(0, 247, 255, 0.5),
        rgba(0, 247, 255, 0)
      );
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      z-index: -1;
      animation: borderFlow 4s linear infinite;
    }

    // 扫描线
    .scan-line {
      position: absolute;
      top: 8vh;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        to right,
        transparent,
        rgba(0, 247, 255, 0.8),
        transparent
      );
      animation: scan 5s infinite linear;
    }

    // 面板标题
    .panel-header {
      padding: 0 0.5vh 1.8vh 0.5vh;
      margin-bottom: 1vh;
      position: relative;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 247, 255, 0.3);

      .title {
        font-size: 1.8vh;
        font-weight: bold;
        color: #00f7ff;
        display: flex;
        align-items: center;
        gap: 1vh;
        text-shadow: 0 0 10px rgba(0, 247, 255, 0.6);

        i {
          color: #ffd700;
          font-size: 1.8vh;
        }
      }

      .update-info {
        display: flex;
        align-items: center;
        gap: 0.8vh;
        font-size: 1.3vh;
        color: #00ff9d;

        .pulse-dot {
          display: inline-block;
          width: 0.7vh;
          height: 0.7vh;
          border-radius: 50%;
          background: #00ff9d;
          box-shadow: 0 0 8px rgba(0, 255, 157, 0.8);
          animation: pulse 1.5s infinite ease-in-out;
        }
      }
    }

    // 表格头部
    .table-header {
      display: flex;
      padding: 1.2vh 1vh;
      background: rgba(0, 20, 40, 0.5);
      border-radius: 6px;
      margin-bottom: 1vh;
      font-size: 1.4vh;
      font-weight: bold;
      color: #00d0ff;
      border: 1px solid rgba(0, 247, 255, 0.3);

      .header-column {
        width: 25%;
        text-align: center;
        text-shadow: 0 0 6px rgba(0, 247, 255, 0.6);
      }
    }
    .loop-wrapper {
      overflow: hidden;
      position: relative;
      border-radius: 8px;
      margin-top: 10px;

      // 添加发光边框效果
      &:after {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border-radius: 8px;
        background: linear-gradient(
          135deg,
          rgba(0, 247, 255, 0),
          rgba(0, 247, 255, 0.5),
          rgba(0, 247, 255, 0)
        );
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        z-index: -1;
        animation: borderFlow 3s linear infinite;
      }
    }
    .loop-animation {
      animation: loopScroll 300s linear infinite; /* 调整速度 */
    }
    @keyframes loopScroll {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(calc(-50% + var(--visible-height, 300px)));
      }
    }
    // 代理商列表
    .ranking-list {
      flex: 1;
      overflow-y: auto;
      position: relative;

      /* 初始化位置 */
      transform: translateY(0);
      will-change: transform;
      transition: none;
      &::-webkit-scrollbar {
        width: 0.4vh;
      }

      &::-webkit-scrollbar-track {
        background: rgba(0, 15, 30, 0.4);
        border-radius: 0.2vh;
      }

      &::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, #00f7ff, #0084ff);
        border-radius: 0.2vh;
      }
      transform: translateY(0);
      will-change: transform;

      // 移除原有的滚动条样式
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .ranking-list::-webkit-scrollbar {
      width: 0;
    }

    // 代理商条目
    .agent-item {
      display: flex;
      align-items: center;
      padding: 1.8vh 1vh;
      margin-bottom: 1.2vh;
      background: rgba(8, 20, 36, 0.6);
      border-radius: 8px;
      transition: all 0.3s ease;
      transform: translateZ(0);
      position: relative;
      overflow: hidden;

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid rgba(0, 247, 255, 0.2);
        border-radius: 8px;
        pointer-events: none;
        z-index: 0;
      }

      &:hover {
        background: rgba(0, 247, 255, 0.12);
        transform: translateY(-1px);
        box-shadow: 0 5px 15px rgba(0, 247, 255, 0.3);
      }

      > div {
        text-align: center;
      }

      // 排名前三的特殊样式
      &.top-1 {
        background: rgba(255, 215, 0, 0.1);

        &:before {
          border-color: rgba(255, 215, 0, 0.5);
        }

        .rank-cell {
          background: linear-gradient(135deg, #ffd700, #ffa500);
          color: #000;
          font-weight: bold;
        }
      }

      &.top-2 {
        background: rgba(192, 192, 192, 0.1);

        &:before {
          border-color: rgba(192, 192, 192, 0.5);
        }

        .rank-cell {
          background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
          color: #000;
          font-weight: bold;
        }
      }

      &.top-3 {
        background: rgba(205, 127, 50, 0.1);

        &:before {
          border-color: rgba(205, 127, 50, 0.5);
        }

        .rank-cell {
          background: linear-gradient(135deg, #cd7f32, #a5671f);
          color: #000;
          font-weight: bold;
        }
      }

      // 排名单元格
      .rank-cell {
        font-size: 1.6vh;
        color: #00f7ff;
        height: 2.5vh;
        width: 2.5vh;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        margin: 0 auto;

        &.rank-1,
        &.rank-2,
        &.rank-3 {
          box-shadow: 0 0 12px currentColor;
        }
      }

      // 姓名单元格
      .name-cell {
        flex: 1.1;
        font-size: 1.5vh;
        font-weight: 500;
        color: #e6f7ff;
      }

      // 收益单元格
      .income-cell {
        flex: 1.2;
        font-size: 1.5vh;
        color: #ffcc00;
        font-weight: bold;
      }

      // 盒子单元格
      .box-cell {
        flex: 0.8;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5vh;
        font-size: 1.5vh;
        color: #00e4ff;
        font-weight: bold;

        .box-icon {
          color: #2b95ff;
          font-size: 1.5vh;
        }
      }
    }
  }

  // 动画定义
  @keyframes borderFlow {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 400% 0%;
    }
  }

  @keyframes scan {
    0% {
      transform: translateY(-5vh);
    }
    100% {
      transform: translateY(95vh);
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0.8;
    }
  }

  @keyframes shine {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 247, 255, 0.5);
    }
    70% {
      box-shadow: 0 0 0 1vh rgba(0, 247, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(0, 247, 255, 0);
    }
  }
  .hud-dashboard {
    width: 20%; // 占25%宽度
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
    position: relative;

    &::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      z-index: 0;
      pointer-events: none;
    }

    .hud-panel {
      background: rgba(12, 28, 46, 0.7);
      border: 1px solid rgba(0, 247, 255, 0.3);
      border-radius: 12px;
      padding: 20px;
      position: relative;
      backdrop-filter: blur(5px);
      z-index: 1;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 103, 255, 0.2);
      }

      &.glow-border::after {
        content: "";
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border-radius: 12px;
        background: linear-gradient(
          135deg,
          rgba(0, 247, 255, 0),
          rgba(0, 247, 255, 0.5),
          rgba(0, 247, 255, 0)
        );
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        z-index: -1;
        animation: borderFlow 3s linear infinite;
      }

      @keyframes borderFlow {
        0% {
          background-position: 0% 0%;
        }
        100% {
          background-position: 200% 0%;
        }
      }
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          to right,
          transparent,
          rgba(0, 247, 255, 0.5),
          transparent
        );
      }
    }

    .panel-title {
      color: #00f7ff;
      font-size: 22px;
      font-weight: bold;
      margin: 0;
      position: relative;
      padding-left: 15px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(to bottom, #00f7ff, #003c8f);
        border-radius: 2px;
      }
    }

    .refresh-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #00ff9d;

      .pulse-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #00ff9d;
        box-shadow: 0 0 10px rgba(0, 255, 157, 0.8);
        animation: pulse 2s infinite;

        @keyframes pulse {
          0% {
            transform: scale(1);
            opacity: 0.8;
          }
          50% {
            transform: scale(1.2);
            opacity: 1;
          }
          100% {
            transform: scale(1);
            opacity: 0.8;
          }
        }
      }
    }

    .chart {
      height: 15vh;
      width: 100%;
    }

    .panel-footer {
      display: flex;
      justify-content: space-around;
      // margin-top: 25px;
      padding-top: 15px;
      border-top: 1px solid rgba(0, 247, 255, 0.2);

      .stat-item {
        text-align: center;

        &.online .stat-value {
          color: #00ff9d;
          text-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
        }

        &.offline .stat-value {
          color: #ff3c5c;
          text-shadow: 0 0 10px rgba(255, 60, 92, 0.5);
        }
      }

      .stat-label {
        font-size: 16px;
        color: #00f7ff;
        margin-bottom: 5px;
      }

      .stat-value {
        font-size: 30px;
        font-weight: bold;
        color: #00f7ff;
      }
    }

    .data-grid {
      margin-top: 25px;
      border-top: 1px solid rgba(0, 247, 255, 0.2);
      padding-top: 15px;

      .grid-header {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        padding: 10px 15px;
        background: rgba(0, 15, 30, 0.4);
        border-radius: 6px;
        margin-bottom: 8px;
        font-weight: bold;
        color: #00ff9d;
      }

      .grid-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        padding: 8px 15px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(0, 247, 255, 0.1);
        transition: all 0.3s ease;

        &:hover {
          background: rgba(0, 247, 255, 0.1);
          transform: translateX(5px);
        }

        &:last-child {
          border-bottom: none;
        }
      }

      .status-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #00ff9d;
        box-shadow: 0 0 8px #00ff9d;
        margin-right: 8px;
      }
    }

    .panel-tools {
      display: flex;
      gap: 10px;
      align-items: center;

      .search-container {
        position: relative;

        .hud-input {
          background: rgba(0, 15, 30, 0.6);
          border: 1px solid rgba(0, 247, 255, 0.3);
          border-radius: 20px;
          padding: 8px 35px 8px 15px;
          color: #00f7ff;
          font-size: 14px;
          width: 180px;

          &::placeholder {
            color: #00f7ff77;
          }

          &:focus {
            outline: none;
            box-shadow: 0 0 10px rgba(0, 247, 255, 0.3);
          }
        }

        .search-icon {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          color: #00f7ff;
          font-size: 14px;
        }
      }

      .hud-select {
        background: rgba(0, 15, 30, 0.6);
        border: 1px solid rgba(0, 247, 255, 0.3);
        border-radius: 20px;
        padding: 8px 15px;
        color: #00f7ff;
        font-size: 14px;

        option {
          background: #0c1c2e;
        }

        &:focus {
          outline: none;
          box-shadow: 0 0 10px rgba(0, 247, 255, 0.3);
        }
      }

      .hud-button {
        background: rgba(0, 15, 30, 0.6);
        border: 1px solid rgba(0, 247, 255, 0.3);
        color: #00f7ff;
        padding: 8px 20px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 14px;

        &:hover {
          background: rgba(0, 247, 255, 0.2);
          box-shadow: 0 0 10px rgba(0, 247, 255, 0.4);
        }
      }
    }

    // 面板之间的分隔效果
    .hud-panel + .hud-panel {
      // margin-top: 30px;
    }

    // 动画效果
    @keyframes borderFlow {
      0% {
        background-position: 0% 0%;
      }
      100% {
        background-position: 200% 0%;
      }
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(0, 247, 255, 0.6);
      }
      70% {
        box-shadow: 0 0 0 12px rgba(0, 247, 255, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(0, 247, 255, 0);
      }
    }
  }
  .hud-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
  }

  .dashboard {
    width: 100%;
    position: relative;
    background: rgba(8, 23, 42, 0.85);
    border: 1px solid rgba(0, 190, 255, 0.25);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 150, 255, 0.3);
    padding: 25px;
    height: 100%;
  }

  /* HUD网格背景 */
  .hud-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
        circle at 10% 20%,
        rgba(0, 180, 255, 0.03) 0%,
        transparent 15%
      ),
      radial-gradient(
        circle at 90% 80%,
        rgba(0, 180, 255, 0.03) 0%,
        transparent 15%
      ),
      repeating-linear-gradient(
        to right,
        rgba(0, 180, 255, 0.02) 0,
        rgba(0, 180, 255, 0.02) 1px,
        transparent 1px,
        transparent 20px
      ),
      repeating-linear-gradient(
        to bottom,
        rgba(0, 180, 255, 0.02) 0,
        rgba(0, 180, 255, 0.02) 1px,
        transparent 1px,
        transparent 20px
      );
    z-index: 1;
    pointer-events: none;
  }

  /* 面板发光效果 */
  .dash-glow {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 16px;
    background: linear-gradient(
      135deg,
      rgba(0, 180, 255, 0),
      rgba(0, 180, 255, 0.5),
      rgba(0, 180, 255, 0)
    );
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: 0;
    animation: borderFlow 8s linear infinite;
  }

  /* 扫描线效果 */
  .scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(0, 180, 255, 0.8),
      transparent
    );
    animation: scan 7s infinite linear;
    z-index: 2;
    pointer-events: none;
  }

  /* 面板标题区域 */
  .panel-header {
    // padding-bottom: 20px;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    // flex-direction: column;
    gap: 10px;
    z-index: 3;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(
        to right,
        transparent,
        rgba(0, 180, 255, 0.5),
        transparent
      );
    }

    .title-container {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        font-size: clamp(1.5rem, 3vw, 2.5rem);
        font-weight: bold;
        color: #00ccff;
        text-shadow: 0 0 15px rgba(0, 180, 255, 0.9);
        letter-spacing: 1px;
      }

      .update-indicator {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: clamp(0.8rem, 1.5vw, 1.2rem);
        color: #00ffaa;

        .pulse-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #00ffaa;
          box-shadow: 0 0 10px rgba(0, 255, 170, 0.8);
          animation: pulse 1.5s infinite;
        }
      }
    }

    .last-update {
      align-self: flex-end;
      font-size: clamp(0.8rem, 1.5vw, 1.1rem);
      color: #00bbff;
    }
  }

  /* 数据卡片网格 */
  .stats-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
    z-index: 3;
  }

  /* 数据卡片 */
  .stat-card {
    position: relative;
    background: rgba(8, 23, 42, 0.6);
    border: 1px solid rgba(0, 150, 255, 0.2);
    border-radius: 10px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 4;
    .xinstatr_box {
      display: flex;
      align-items: center;
    }
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
      border-color: rgba(0, 180, 255, 0.6);
      background: rgba(10, 32, 58, 0.8);

      .card-glow {
        opacity: 0.6;
      }
    }

    .card-top {
      padding: 10px 0 0 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
      height: 25%;

      .icon-container {
        width: 45px;
        height: 45px;
        background: rgba(0, 100, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        i {
          font-size: clamp(1.2rem, 2vw, 1.8rem);
          color: #00ccff;
        }
      }

      .title {
        font-size: clamp(1rem, 1.8vw, 1.6rem);
        color: #a1dfff;
        font-weight: 500;
      }
    }

    .value {
      font-size: clamp(2rem, 4vw, 3.5rem);
      font-weight: bold;
      color: #00f7ff;
      text-shadow: 0 0 10px rgba(0, 200, 255, 0.8);
      flex-grow: 1;
      display: flex;
      align-items: center;
      padding-left: 10px;

      /* 动态数值动画 */
      &.animated {
        animation: pulseText 1.5s infinite alternate;
      }
    }

    .card-footer {
      display: flex;
      justify-content: flex-end;
      height: 25%;

      .trend {
        font-size: clamp(0.9rem, 1.5vw, 1.2rem);
        padding: 6px 12px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 5px;

        i {
          font-size: 0.8em;
        }

        &.positive {
          background: rgba(0, 255, 170, 0.15);
          color: #00ffaa;
          border: 1px solid rgba(0, 255, 170, 0.3);
        }

        &.negative {
          background: rgba(255, 80, 80, 0.15);
          color: #ff5050;
          border: 1px solid rgba(255, 80, 80, 0.3);
        }
      }
    }

    /* 卡片视觉效果 */
    .card-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(
        circle at center,
        rgba(0, 150, 255, 0.15) 0%,
        transparent 70%
      );
      opacity: 0.3;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .border-effect {
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, #00ccff, transparent);

      &.top {
        top: 0;
        animation: borderTopSlide 4s infinite linear;
      }

      &.bottom {
        bottom: 0;
        animation: borderBottomSlide 4s infinite linear;
      }
    }
  }

  /* 额外的科技装饰元素 */
  .tech-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(15px);
    z-index: 0;

    &:nth-child(1) {
      width: 30vw;
      height: 30vw;
      top: -15vw;
      right: -10vw;
      background: rgba(0, 100, 255, 0.08);
    }

    &:nth-child(2) {
      width: 20vw;
      height: 20vw;
      bottom: -10vw;
      left: -5vw;
      background: rgba(0, 200, 255, 0.1);
    }
  }

  /* 动画定义 */
  @keyframes borderFlow {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 400% 0%;
    }
  }

  @keyframes scan {
    0% {
      top: 0;
    }
    100% {
      top: 100%;
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0.8;
    }
  }

  @keyframes pulseText {
    0% {
      text-shadow: 0 0 10px rgba(0, 200, 255, 0.8);
    }
    100% {
      text-shadow: 0 0 20px rgba(0, 200, 255, 1),
        0 0 30px rgba(0, 150, 255, 0.8);
    }
  }

  @keyframes borderTopSlide {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes borderBottomSlide {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
  }

  @media (max-width: 480px) {
    .hud-container {
      padding: 10px;
    }

    .stats-grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .stat-card {
      aspect-ratio: 5/3;
    }
  }

  .dashboard-footer {
    margin-top: 25px;
    padding-top: 15px;
    text-align: center;
    border-top: 1px solid rgba(0, 180, 255, 0.2);
    color: #00bbff;
    font-size: 0.9rem;
    z-index: 3;
    position: relative;

    a {
      color: #00f7ff;
      text-decoration: none;
      transition: all 0.3s;

      &:hover {
        text-shadow: 0 0 10px rgba(0, 200, 255, 0.8);
      }
    }
  }
}

.agent-row-flex {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 全屏提示样式 */
.fullscreen-tip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.tip-content {
  text-align: center;
  color: #fff;
  padding: 40px;
  border: 2px solid rgba(0, 247, 255, 0.5);
  border-radius: 20px;
  background: rgba(12, 28, 46, 0.9);
  box-shadow: 0 0 30px rgba(0, 247, 255, 0.3);
  transition: all 0.3s ease;
}

.tip-content:hover {
  border-color: rgba(0, 247, 255, 0.8);
  box-shadow: 0 0 40px rgba(0, 247, 255, 0.5);
  transform: scale(1.05);
}

.tip-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  animation: pulse 2s infinite;
}

.tip-text {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #00f7ff;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.6);
}

.tip-hint {
  font-size: 1rem;
  color: #00ff9d;
  opacity: 0.8;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

</style>
